import React from "react";
import { Button, Layout, Avatar, Dropdown} from 'antd';
import './index.css'
import { MenuUnfoldOutlined } from '@ant-design/icons'
import { useDispatch } from "react-redux";
import { collapseMenu } from '../../store/reducer/tab'
import { useNavigate } from "react-router-dom";

const { Header } = Layout;

const CommonHeader = function ({ collapsed }) {
  const navigate = useNavigate()
  // 登出逻辑
  const logout = () => {
    localStorage.removeItem('token')
    navigate('/login')
  }
  const items = [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer">
          个人中心
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a onClick={ () => logout() } target="_blank" rel="noopener noreferrer">
          退出
        </a>
      )
    }
  ]
  // 创建dispatch
  const dispatch = useDispatch()
  // 点击展开收起按钮
  const setCollapsed = () => {
    console.log(collapsed)
    dispatch(collapseMenu())
  }
  return (
    <Header className="header-container">
      <Button
        type='text'
        icon={ <MenuUnfoldOutlined /> }
        style={{
          fontSize: '16px',
          width: 64,
          height: 32,
          backgroundColor: '#fff'
        }}
        onClick={() => { setCollapsed() }}
      />
      <Dropdown menu={{ items }}>
        <Avatar size={36} src={require("../../assets/images/user.png")}/>
      </Dropdown>
    </Header>
  )
}

export default CommonHeader